<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container-fluid brand">
      <a class="navbar-brand" href="#">
        <img style="height:34px" src="https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/捉虫.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 navbarLeft">
          <li class="nav-item">
            <a class="nav-link" :class="{'active':whoActive === 'blog' ? true : false}" href="#">社区</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://kevinwu_21.gitee.io/notewk">noteWk文档</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <el-input v-model="searchInfo" size="large" type="search" placeholder="Search" prefix-icon="Search"/>
          <el-button @click="searchClick" size="large" type="primary" style="border-radius: 30px;margin-left: 3px;">搜索</el-button>
        </form>
        <div class="nav-item dropdown dropdown-menu-end avatar-div">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <el-avatar
              :src="avatarUrl"
            />
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li @click="">
              <div class="dropdown-item">
                <el-upload
                action="#"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :http-request="upload"
                >
                  <p>更改头像</p>
                </el-upload>
              </div>
            </li>
            <li><a class="dropdown-item" href="#"><p>我的关注</p></a></li>
            <li><hr class="dropdown-divider"></li>
            <li><div @click="log" class="dropdown-item"><p>{{logShow}}</p></div></li>
          </ul>
        </div>
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 navbarRight">
          <li class="nav-item">
            <a class="nav-link" :class="{'active':whoActive==='collection' ? true : false}"  aria-current="page" href="#/collection">收藏夹</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#/">消息</a>
          </li>
        </ul>
        <div>
          <a href="#/publishPosts" style="text-decoration: none;">
            <el-button size="large" type="primary" round>发表帖子</el-button>
          </a>
        </div>
      </div>
    </div>
  </nav>
</template>
<script setup>
import { ref , onMounted} from 'vue'
import { useRouter } from 'vue-router'
import COS from 'cos-js-sdk-v5'
import { update,getUser } from '@/api/system.js'
import { ElMessage } from 'element-plus';
const router = useRouter();
const searchInfo = ref('')
const searchClick = () => {
  router.push({ path: 'search', query: { searchInfo: searchInfo.value }})
}
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDRhgOr3ze4D6i4A1buxjETTCeqmSr0tVq', // 身份识别ID
  SecretKey: '5tSkmY4JGwMWP4TcU5PSEjxvd4E7k7DA' // 身份秘钥
})
const avatarUrl = ref('https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/user.png')
const upload = (res) => {
  if(localStorage.getItem("userId")){
    if (res.file) {
      // 执行上传操作
      cos.putObject({
        Bucket: 'notewk-1304925042', /* 存储桶 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: res.file.name, /* 文件名 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: res.file, // 上传文件对象
        onProgress: (progressData) => { // 上传进度
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        console.log(err || data)
        // 上传成功之后
        if (data.statusCode === 200) {
          avatarUrl.value = `https:${data.Location}`
          const userId = localStorage.getItem("userId")
          console.log(userId);
          console.log(avatarUrl.value);
              const mydata = {
              id: userId,
              img: avatarUrl.value,
          }
          update(mydata).then((res) => {
            console.log(res)
            location.reload()
          })
        }
      })
    }
  }else{
    ElMessage({
      message: '尚未登录，请先登录用户',
      type: 'error',
    })
  }
}
const handleAvatarSuccess = (res, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
}
const whoActive = ref()
onMounted(() =>{
  whoActive.value = router.currentRoute.value.name
  checkLogin()
  console.log("object");
})
const logShow  = ref('登录')
const checkLogin = () => {
  const userId = localStorage.getItem('userId')
  if (userId){
    logShow.value = '退出登录'
    console.log(userId);
    const data = {
        id: userId,
    }
    getUser(data).then((res) => {
      console.log(res.data[0])
      avatarUrl.value=res.data[0].img
    })
  }
}
const log = () => {
  if(!localStorage.getItem('userId')){
    router.push('/login')
  }else{
    localStorage.removeItem('userId')
    ElMessage({
      title: '已退出',
      message: '退出登录成功',
      type: 'success',
    })
    avatarUrl.value = 'https://notewk-1304925042.cos.ap-guangzhou.myqcloud.com/notewk/user.png'
    logShow.value = '登录'
  }
}
</script>
<style scoped lang="scss">
// #region ------  navbar 导航栏  -----
p {
  margin-top: .4em;
  margin-bottom: .4rem;
}
.el-header{
  padding: 0;
}
.navbar-brand{
  margin: 0 15px;
}
.avatar-div{
  margin: 0 0 0 auto;
}
.avatar-div .dropdown-toggle::after{
  display: none;
}
.avatar{
  height: 39px;
  border-radius: 35px;
}
.navbarLeft{
  margin: 0 10px 0 0 !important
}
.navbarLeft li{
  margin: 0 8px !important
}
.navbarRight{
  margin: 0 15px !important;
}
.navbarRight li{
  margin: 0 8px !important;
}
.nav-link:focus, .nav-link:hover{
  color:#a6594a;
}
.nav-link.active{
  color:#a6594a;
  border-bottom: 2px solid;
}
:deep(.d-flex .el-input--large .el-input__wrapper){
  border-radius: 40px;
}
:deep(.dropdown-item:active){
  background-color: #5F3634 !important;
  color:#fff;
}
:deep(.dropdown-item:hover){
  background-color: #5F3634 !important;
  color:#fff;
  cursor: pointer;
}
</style>